Async Generator Functies: Beheers Asynchrone Iteratieprotocollen

Asynchroon programmeren is een hoeksteen van moderne JavaScript-ontwikkeling, vooral bij het omgaan met I/O-operaties zoals het ophalen van gegevens van API's, het lezen van bestanden of het interageren met databases. Traditioneel vertrouwden we op Promises en async/await om deze asynchrone taken te beheren. Async generator functies bieden echter een krachtige en elegante manier om asynchrone iteratie af te handelen, waardoor we streams van gegevens asynchroon en efficiënt kunnen verwerken.

Begrip van Asynchrone Iteratieprotocollen

Voordat we in async generator functies duiken, is het essentieel om de asynchrone iteratieprotocollen waarop ze zijn gebouwd te begrijpen. Deze protocollen definiëren hoe asynchrone gegevensbronnen op een gecontroleerde en voorspelbare manier kunnen worden geïtereerd.

Het Asynchrone Iterable Protocol

Het asynchrone iterable protocol definieert een object dat asynchroon kan worden geïtereerd. Een object voldoet aan dit protocol als het een methode heeft met de sleutel Symbol.asyncIterator die een asynchrone iterator retourneert.

Denk aan een iterable als een afspeellijst met nummers. Het asynchrone iterable is als een afspeellijst waarbij elk nummer (asynchroon) moet worden geladen voordat het kan worden afgespeeld.

Voorbeeld:

            const asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      next() {
        // Asynchroon de volgende waarde ophalen
      }
    };
  }
};

            

              
                Copy
              
            
          

Het Asynchrone Iterator Protocol

Het asynchrone iterator protocol definieert de methoden die een asynchrone iterator moet implementeren. Een object dat voldoet aan dit protocol, moet een next() methode hebben, en optioneel return() en throw() methoden.

• next(): Deze methode retourneert een Promise die oplost naar een object met twee eigenschappen: value en done. value bevat de volgende waarde in de reeks en done is een booleaanse waarde die aangeeft of de iteratie is voltooid.
• return(): (Optioneel) Deze methode retourneert een Promise die oplost naar een object met value en done eigenschappen. Het signaleert dat de iterator wordt gesloten. Dit is nuttig voor het vrijgeven van bronnen.
• throw(): (Optioneel) Deze methode retourneert een Promise die afwijst met een fout. Het wordt gebruikt om aan te geven dat er een fout is opgetreden tijdens de iteratie.

Voorbeeld:

            const asyncIterator = {
  next() {
    return new Promise((resolve) => {
      // Asynchroon de volgende waarde ophalen
      setTimeout(() => {
        resolve({ value: /* een waarde */, done: false });
      }, 100);
    });
  },
  return() {
    return Promise.resolve({ value: undefined, done: true });
  },
  throw(error) {
    return Promise.reject(error);
  }
};

            

              
                Copy
              
            
          

Introductie van Async Generator Functies

Async generator functies bieden een handigere en leesbaardere manier om asynchrone iterators en iterables te creëren. Ze combineren de kracht van generators met de asynchroniciteit van Promises.

Syntaxis

Een async generator functie wordt gedeclareerd met de async function* syntaxis:

            async function* mijnAsyncGenerator() {
  // Asynchrone operaties en yield statements hier
}

            

              
                Copy
              
            
          

Het yield Trefwoord

Binnen een async generator functie wordt het yield trefwoord gebruikt om waarden asynchroon te produceren. Elke yield statement onderbreekt effectief de uitvoering van de generator functie totdat de yielded Promise oplost.

Voorbeeld:

            async function* fetchUsers() {
  const user1 = await fetch('https://example.com/api/users/1').then(res => res.json());
  yield user1;

  const user2 = await fetch('https://example.com/api/users/2').then(res => res.json());
  yield user2;

  const user3 = await fetch('https://example.com/api/users/3').then(res => res.json());
  yield user3;
}

            

              
                Copy
              
            
          

Async Generators Consumeren met for await...of

U kunt de waarden die door een async generator functie worden geproduceerd, itereren met de for await...of lus. Deze lus behandelt automatisch de asynchrone resolutie van Promises die door de generator worden yielded.

Voorbeeld:

            async function main() {
  for await (const user of fetchUsers()) {
    console.log(user);
  }
}

main();

            

              
                Copy
              
            
          

Praktische Gebruiksscenario's voor Async Generator Functies

Async generator functies blinken uit in scenario's waarbij asynchrone datastromen betrokken zijn, zoals:

1. Streaming van Gegevens van API's

Stel u voor dat u een grote dataset ophaalt van een API die paginering ondersteunt. In plaats van de volledige dataset in één keer op te halen, kunt u een async generator functie gebruiken om pagina's met gegevens incrementeel op te halen en te yielden.

Voorbeeld (Ophalen van Gepagineerde Gegevens):

            async function* fetchPaginatedData(url, pageSize = 10) {
  let page = 1;

  while (true) {
    const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);
    const data = await response.json();

    if (data.length === 0) {
      return; // Geen gegevens meer
    }

    for (const item of data) {
      yield item;
    }

    page++;
  }
}

async function main() {
  for await (const item of fetchPaginatedData('https://api.example.com/data')) {
    console.log(item);
  }
}

main();

            

              
                Copy
              
            
          

Internationaal Voorbeeld (Valutakoers API):

            async function* fetchExchangeRates(currencyPair, startDate, endDate) {
  let currentDate = new Date(startDate);

  while (currentDate <= new Date(endDate)) {
    const dateString = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
    const url = `https://api.exchangerate.host/${dateString}?base=${currencyPair.substring(0,3)}&symbols=${currencyPair.substring(3,6)}`;
    try {
      const response = await fetch(url);
      const data = await response.json();

      if (data.success) {
        yield {
          date: dateString,
          rate: data.rates[currencyPair.substring(3,6)]
        };
      }

    } catch (error) {
      console.error(`Fout bij het ophalen van gegevens voor ${dateString}:`, error);
      // U kunt fouten anders behandelen, bijv. opnieuw proberen of de datum overslaan.
    }

    currentDate.setDate(currentDate.getDate() + 1);
  }
}

async function main() {
  const currencyPair = 'EURUSD';
  const startDate = '2023-01-01';
  const endDate = '2023-01-10';

  for await (const rate of fetchExchangeRates(currencyPair, startDate, endDate)) {
    console.log(rate);
  }
}

main();

            

              
                Copy
              
            
          

Dit voorbeeld haalt dagelijkse EUR naar USD wisselkoersen op voor een bepaalde periode. Het behandelt mogelijke fouten tijdens API-aanroepen. Vergeet niet om `https://api.exchangerate.host` te vervangen door een betrouwbaar en geschikt API-eindpunt.

2. Verwerken van Grote Bestanden

Bij het werken met grote bestanden kan het inlezen van het hele bestand in het geheugen inefficiënt zijn. Async generator functies stellen u in staat om het bestand regel voor regel of in chunks te lezen, waarbij elke chunk asynchroon wordt verwerkt.

Voorbeeld (Grote Bestand Regel voor Regel Lezen - Node.js):

            const fs = require('fs');
const readline = require('readline');

async function* readLines(filePath) {
  const fileStream = fs.createReadStream(filePath);

  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity
  });

  for await (const line of rl) {
    yield line;
  }
}

async function main() {
  for await (const line of readLines('large_file.txt')) {
    // Verwerk elke regel asynchroon
    console.log(line);
  }
}

main();

            

              
                Copy
              
            
          

Dit Node.js voorbeeld demonstreert het lezen van een bestand regel voor regel met behulp van fs.createReadStream en readline.createInterface. De readLines async generator functie yield elke regel asynchroon.

3. Afhandelen van Real-time Datastromen (WebSockets, Server-Sent Events)

Async generator functies zijn zeer geschikt voor het verwerken van real-time datastromen van bronnen zoals WebSockets of Server-Sent Events (SSE). U kunt continu gegevens yielden zodra deze uit de stroom arriveren.

Voorbeeld (Gegevens Verwerken van een WebSocket - Conceptueel):

            // Dit is een conceptueel voorbeeld en vereist een WebSocket-bibliotheek zoals 'ws' (Node.js) of de ingebouwde WebSocket API van de browser.

async function* processWebSocketStream(url) {
  const websocket = new WebSocket(url);

  websocket.onmessage = (event) => {
    // Dit moet buiten de generator worden afgehandeld.
    // Meestal zou je event.data in een wachtrij pushen
    // en de generator zou asynchroon uit de wachtrij trekken
    // via een Promise die oplost wanneer er gegevens beschikbaar zijn.
  };
  websocket.onerror = (error) => {
     // Fouten afhandelen.
  };
  websocket.onclose = () => {
    // Afsluiten afhandelen.
  }

  // Het daadwerkelijke yielden en wachtrijbeheer zou hier gebeuren,
  // gebruikmakend van Promises om te synchroniseren tussen het websocket.onmessage
  // event en de async generator functie.
  // Dit is een vereenvoudigde illustratie.

  //while(true){ // Gebruik dit als gebeurtenissen correct worden afgehandeld.
  //  const data = await new Promise((resolve) => {
  //   // Los de promise op wanneer er gegevens in de wachtrij beschikbaar zijn.
  //  })
  //  yield data
  //}

}

async function main() {
  // for await (const message of processWebSocketStream('wss://example.com/ws')) {
  //   console.log(message);
  // }
  console.log("WebSocket voorbeeld - conceptueel alleen. Zie commentaar in de code voor details.");
}

main();

            

              
                Copy
              
            
          

Belangrijke Opmerkingen over het WebSocket voorbeeld:

• Het verstrekte WebSocket voorbeeld is voornamelijk conceptueel, omdat directe integratie van de gebeurtenisgestuurde aard van WebSockets met async generators zorgvuldige synchronisatie met behulp van Promises en wachtrijen vereist.
• Real-world implementaties omvatten doorgaans het bufferen van binnenkomende WebSocket-berichten in een wachtrij en het gebruik van een Promise om de async generator te signaleren wanneer nieuwe gegevens beschikbaar zijn. Dit zorgt ervoor dat de generator niet blokkeert tijdens het wachten op gegevens.

4. Implementeren van Aangepaste Asynchrone Iterators

Async generator functies maken het eenvoudig om aangepaste asynchrone iterators te maken voor elke asynchrone gegevensbron. U kunt uw eigen logica definiëren voor het ophalen, verwerken en yielden van waarden.

Voorbeeld (Asynchroon Genereren van een Reeks Getallen):

            async function* generateNumbers(start, end, delay) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, delay));
    yield i;
  }
}

async function main() {
  for await (const number of generateNumbers(1, 5, 500)) {
    console.log(number);
  }
}

main();

            

              
                Copy
              
            
          

Dit voorbeeld genereert een reeks getallen van start tot end, met een gespecificeerde delay tussen elk getal. De regel await new Promise(resolve => setTimeout(resolve, delay)) introduceert een asynchrone vertraging.

Foutafhandeling

Foutafhandeling is cruciaal bij het werken met async generator functies. U kunt try...catch blokken binnen de generator functie gebruiken om fouten af te handelen die optreden tijdens asynchrone bewerkingen.

Voorbeeld (Foutafhandeling in een Async Generator):

            async function* fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  } catch (error) {
    console.error('Fout bij het ophalen van gegevens:', error);
    // U kunt ervoor kiezen de fout opnieuw te gooien, een standaardwaarde te yielden, of de iteratie te stoppen.
    // Bijvoorbeeld, yield { error: error.message };
    throw error;
  }
}

async function main() {
  try {
    for await (const data of fetchData('https://example.com/api/invalid')) {
      console.log(data);
    }
  } catch (error) {
    console.error('Fout tijdens iteratie:', error);
  }
}

main();

            

              
                Copy
              
            
          

Dit voorbeeld demonstreert hoe fouten die kunnen optreden tijdens de fetch bewerking worden afgehandeld. Het try...catch blok vangt eventuele fouten en logt deze naar de console. U kunt de fout ook opnieuw gooien om door de consument van de generator te worden opgevangen, of een foutobject yielden.

Voordelen van het Gebruik van Async Generator Functies

• Verbeterde Leesbaarheid van Code: Async generator functies maken asynchrone iteratiecode leesbaarder en beter onderhoudbaar in vergelijking met traditionele Promise-gebaseerde benaderingen.
• Vereenvoudigde Asynchrone Controleflow: Ze bieden een meer natuurlijke en sequentiële manier om asynchrone logica uit te drukken, waardoor het gemakkelijker wordt om te redeneren.
• Efficiënt Bronbeheer: Ze stellen u in staat gegevens in chunks of streams te verwerken, waardoor het geheugengebruik wordt verminderd en de prestaties worden verbeterd, vooral bij grote datasets of real-time datastromen.
• Duidelijke Scheiding van Verantwoordelijkheden: Ze scheiden de logica voor het genereren van gegevens van de logica voor het consumeren van gegevens, wat modulariteit en herbruikbaarheid bevordert.

Vergelijking met Andere Asynchrone Benaderingen

Async Generators versus Promises

Hoewel Promises fundamenteel zijn voor asynchrone bewerkingen, zijn ze minder geschikt voor het afhandelen van reeksen van asynchrone waarden. Async generators bieden een meer gestructureerde en efficiënte manier om te itereren over asynchrone datastromen.

Async Generators versus RxJS Observables

RxJS Observables zijn een andere krachtige tool voor het afhandelen van asynchrone datastromen. Observables bieden meer geavanceerde functies, zoals operators voor het transformeren, filteren en combineren van datastromen. Async generators zijn echter vaak eenvoudiger te gebruiken voor basale asynchrone iteratiescenario's.

Browser- en Node.js-compatibiliteit

Async generator functies worden breed ondersteund in moderne browsers en Node.js. Ze zijn beschikbaar in alle grote browsers die ES2018 (ECMAScript 2018) ondersteunen en Node.js-versies 10 en hoger.

U kunt tools zoals Babel gebruiken om uw code te transpileren naar oudere versies van JavaScript als u oudere omgevingen wilt ondersteunen.

Conclusie

Async generator functies zijn een waardevolle toevoeging aan de toolkit voor asynchroon programmeren in JavaScript. Ze bieden een krachtige en elegante manier om asynchrone iteratie af te handelen, waardoor het gemakkelijker wordt om datastromen efficiënt en onderhoudbaar te verwerken. Door de asynchrone iteratieprotocollen en de syntaxis van async generator functies te begrijpen, kunt u hun voordelen benutten in een breed scala aan toepassingen, van het streamen van gegevens van API's tot het verwerken van grote bestanden en het afhandelen van real-time datastromen.

Verder Leren

• MDN Web Docs: AsyncGeneratorFunction
• Exploring ES2018: Asynchrone Iteratie
• Node.js Documentatie: Raadpleeg de officiële Node.js documentatie voor streams en bestandssysteemoperaties.